<template>
	<div class="pre_order">
        <h1>确认订单</h1>
		<!-- 表格 -->
		<qfTable    :tableData="tableData" 
					:border="false"
					:columns="columns" 
					align="center" 
					:tableLoading="tableLoading">
					<!-- 产品名称 -->
					<template v-slot:productName="{row}">
						<img :src="row.imageUrl" height="30" style="vertical-align: middle;">
						&nbsp;
						<b style="color:red">{{row.productName}}</b>
						<br>
						<b>{{row.description}}</b>
					</template>
					<!-- 产品数量 -->
					<template v-slot:quantity="{row}">
						<el-input-number v-model="quantity" 
										:min="1" 
										:max="row.inventory+1"
										@change="handleCountChange(row.price)"
										label="描述数字"/>
					</template>
					<!-- 总价格 -->
					<template v-slot:total>
						<b style="color:red;font-size:20px">{{tableTotal}}元</b>

					</template>

	    </qfTable>
		<!-- 确然订单的按钮 -->
        <div class="total-fee">
            <div class="box-wrap">
                <div class="box-shadow">
                    <span class="realpay--title"
                        data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
                    <span class="realpay--price-symbol">¥</span>
                    <span class="realpay--price"
                        style="color: rgb(255, 80, 0)">{{tableTotal}}</span>
                    <div class="order-confirmAddr">
                        <div class="confirmAddr-addr-user">
                            <span class="confirmAddr-title">充值详情：</span>
							<span class="confirmAddr-pro">
								{{desc}}
							</span>
                        </div>
                        <div class="confirmAddr-addr">
                            <span class="confirmAddr-title">充值账户：</span>
							<span class="confirmAddr-usn">
								{{userInfo.nickname}}
							</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn">
                <el-button type="danger" @click="commitOrder">提交订单</el-button>
            </div>
    </div>
    </div>
</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue"
import { ElMessage,ElMessageBox } from 'element-plus'
// 引入发送请求的方法
import * as api from "@/api/product"
import * as payApi from "@/api/pay"
import {useRoute} from "vue-router"
import { onMounted,ref,computed} from "vue";
import {useUser} from "@/store/users"
import {storeToRefs} from "pinia"
import { useRouter } from "vue-router"
let router = useRouter()
// pinia的用户信息
let userStore = useUser()
let {userInfo} = storeToRefs(userStore)
// 当前路由对象
let route = useRoute()
// 业务：
// 1.获取上一个页面传递过来的query参数，获取当前的产品信息
let {product_id} = route.query
console.log(product_id);
// 声明控制加载动画的变量
let tableLoading = ref(false)
// 声明一个数据，用于注入给表格
let tableData=ref([])

// 2.展示产品信息
// 根据商品的id获取商品的详情，发送请求
let desc=ref("")
let getProduct =async ()=>{
	// 开启加载动画
	tableLoading.value = true;
	try{
		let res = await api.getProductApi(product_id)
		// console.log(res);
		tableData.value=res.data.data
		// 关闭加载动画
		tableLoading.value = false
		// 产品的详情，进行赋值，表格下面的结果使用
		desc.value=res.data.data[0].description;
		// 第一次拿到了商品，所以对total进行初次赋值操作，可以将数据中的price作为total的首次参数
		tableTotal.value = res.data.data[0].price
	}catch(e){
		console.log(e);
		// 关闭加载动画
		tableLoading.value = false
	}
}
onMounted(()=>{
	getProduct()
})

// 声明一个列对象，用于展示表格表头的数据
// 动态定义表头
let columns= ref([
	{
		label:"产品名称",
		prop:"productName"
	},
	{
		label:"单价",
		prop:"price"
	},
	{
		label:"数量",
		prop:"quantity"
	},
	{
		label:"总价格",
		prop:"total"
	},

])
// 声明计数器的数量
let quantity = ref(1)
// 计算总价格(只是给用户看的，并不能决定最终付款的价格)
let tableTotal = ref("0.00")
let handleCountChange=(price)=>{
	tableTotal.value = (quantity.value * price).toFixed(2)
}

// 3.进行下单
// 支付核心流程或者关键字
// 下单：传递商品id和商品数量
// 支付：传递订单id
// 跳转到下单页面
let commitOrder = () =>{
    // console.log(row);
    // 使用弹框提示用户，是否购买
    ElMessageBox.confirm('你正在提交订单是否继续?','购买提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:"warning"
    })
	// 3.页面需要拉取订单详情
    .then(async()=>{
		try{
			// 1.调用下单接口，传递product_id和产品数量quantity
			let res = await payApi.preOrderApi(product_id,quantity.value)
			console.log(res);//返回订单号
			// 2.跳转页面，跳转到支付页面/pay/payment
			router.push({path:"/pay/payment",query:{order_id:res.data.order_id}})
			ElMessage({
            type:'success',
            message:res.data.msg
        })
		}catch(e){
			console.log(e);
		}
    })
    .catch(()=>{
        ElMessage({
            type:'warning',
            message:"已取消提交"
        })
    })
}
</script>
<script>
export default{
    meat:{
        name:"确认订单"
    }
}
</script>
<style lang="less" scoped>
.price {
	color: #ff0036;
	font-weight: bolder;
}
.total_fee {
	font-size: 16px;
	color: #ff0036;
}
.el-button {
	width: 180px;
	border-radius: 0;
}
.confirm-title {
	text-align: left;
	margin-bottom: 30px;
}
.pre-order {
	padding: 80px 100px 0 100px;
}
.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;
	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
		.realpay--title {
			font-weight: 700;
			color: #333;
		}
		.realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
		}
		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}
		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;
			// text-align: center;
			// font-family: "PingFang SC";
			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}
			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
	}
}
</style>